<template>
	<view class="chooseCity">
		<view class="search-box">
			<view class="input">
				<u--input v-model="params.areaName" prefixIcon="search" :prefixIconStyle="{fontSize:'45rpx'}"
					fontSize="26rpx" placeholder="搜索..." border="surround" inputAlign='left'
					:customStyle="{border:'none'}" @input="handleSearch">
					<template slot="suffix" v-if="params.areaName">
						<u-icon @click="handleClear" name="close-circle-fill" color="#999" size="30rpx"></u-icon>
					</template>
				</u--input>
			</view>
		</view>
		<!-- 热门城市 -->

		<view class="now-city" v-if="params.areaName.trim().length<=0">
			<text class="key">
				当前选择：
			</text>
			<text class="value">
				{{city}}
			</text>
		</view>

		<view class="listHotCity">
			<view class="listHotCity title">
				热门城市：
			</view>
			<view class="listHotCity item" v-for="(item,index) in listHotList" :key="index"
				@click="getcity(index, item)">
				{{item.abbrName}}
			</view>
		</view>

		<view class="box" v-if="params.areaName.trim().length<=0">
			<u-index-list :index-list="cityIndexList" activeColor="#63c8cc" :customNavHeight="90" >
				<template v-for="(item, index) in cityIndexList">
					<u-index-item>
						<u-index-anchor :text="item" bgColor="#fff"></u-index-anchor>
						<view class="city-text" @click="getcity(index, cell)" v-for="(cell, index) in cityList[item]"
							:key="index">
							{{cell.abbrName}}
						</view>
					</u-index-item>
				</template>
			</u-index-list>
		</view>
		<view class="searchRes-box" v-else>
			<view class="searchRes-list" v-if="searchRes.length>0">
				<view class="searchRes-item" v-for="city in searchRes" :key="city.id" @click="getclear">
					{{city.abbrName}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cityIndexList: [],
				cityValueList: [],
				cityList: [],
				params: {
					areaName: ""
				},
				searchRes: [],
				selectedIndex: 0,
				city: uni.getStorageSync('city'),
				listHotList: [],
			}
		},
		methods: {
			handleClear() {
				this.params.areaName = ""
				this.searchRes = []
			},
			getclear() {
				let city = this.searchRes[0].abbrName
				let id = this.searchRes[0].id
				console.log('city', city);
				uni.setStorageSync('city', city);
				uni.setStorageSync('id', id);
				uni.navigateBack({
					delta: 1
				})
			},
			async getCityList() {
				let res = await this.$u.api.getlistMarket()
				this.cityIndexList = Object.keys(res.data).sort()
				this.cityValueList = Object.values(res.data)
				this.cityList = res.data
			},
			async handleSearch() {
				this.searchRes = []
				this.cityValueList.forEach(item => {
					item.forEach(cell => {
						if (cell.areaName.indexOf(this.params.areaName) != -1) {
							this.searchRes.push(cell)
						}
					})
				})
			},
			getcity(index, item) {
				this.selectedIndex = index
				let location = item.lat + ',' + item.lan
				// this.getlocateCitye(location)
				// console.log('city', item);
				let city = item.abbrName
				let id = item.id
				uni.setStorageSync('city', city);
				uni.setStorageSync('id', id);
				uni.navigateBack()
			},
			// async getlocateCitye(location) {
			// 	let res = await this.$u.api.getlocateCitye({
			// 		location: location
			// 	})
			// 	let city = res.data.abbrName
			// 	let id = res.data.id
			// 	uni.setStorageSync('city', city);
			// 	uni.setStorageSync('id', id);
			// 	uni.navigateBack({
			// 		delta: 1
			// 	})
			// },
			// 获取热门城市
			async getlistHotCity() {
				let res = await this.$u.api.getlistHotCity()
				if (res.code == 200) {
					this.listHotList = res.rows
				}
			}
		},
		mounted() {
			this.getCityList()
			this.getlistHotCity()
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #fff;
	}

	.chooseCity {
		background-color: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;

		::v-deep .u-index-list {
			height: 100%;
			position: relative;
			padding-right: 50rpx;

			.u-index-list__letter {
				position: fixed !important;
				top: 55% !important;
				right: 10rpx !important;
				transform: translateY(-50%);
				padding: 0 10rpx !important;
			}

			.u-index-anchor {
				height: auto !important;
				padding: 20rpx 0 !important;
				border: none;

				.u-index-anchor__text {
					color: #000 !important;
				}
			}

			scroll-view {
				max-height: 100% !important;
			}
		}


		.search-box {
			padding: 15rpx 20rpx;

			.input {
				padding: 2rpx 10rpx;
				background-color: #f7f7f7;
				border-radius: 30rpx;
				position: relative;
				z-index: 2;
				display: flex;
				align-items: center;
				flex: 1;
				border-radius: 40rpx;
				font-size: 26rpx;
				color: #666;

				.save {
					background-color: #fff;
					color: #fff;
					padding: 8rpx 25rpx;
					border-radius: 40rpx;
					margin-left: 20rpx;
				}
			}
		}

		.now-city {
			padding:10rpx 0;
			text-align: center;
			font-size: 26rpx;

			.key,.value {
				color: #f56933;
			}
		}

		.listHotCity {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 0 15rpx;
			font-size: 28rpx;

			.title {
				font-weight: 700;
				width: 100%;
				padding: 10rpx 0;
				box-sizing: border-box;
			}

			.item {
				border: 1rpx solid #ccc;
				padding: 10rpx 20rpx;
				border-radius: 10%;
				margin: 10rpx;
			}

		}

		.box {
			padding: 30rpx;
			flex: 1;
			overflow-y: auto;

			.city-index {
				padding: 20rpx 0;
			}

			.city-text {
				font-size: 28rpx;
				padding: 30rpx 0;
				border-bottom: 2rpx solid #dadbde;
			}
		}

		.searchRes-box {
			padding: 20rpx 30rpx;
			flex: 1;
			overflow-y: auto;

			.searchRes-list {
				.searchRes-item {
					font-size: 28rpx;
					padding: 30rpx 0;
					border-bottom: 2rpx solid #e8e9eb;
				}
			}
		}
	}
</style>